<!--课程管理-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc
        img(src="/static/PersonalCenter/背景图_u3060.jpg")
      div.personal
        div.personal-left
          div.HeadPortrait
            <!--img(src="static/PersonalCenter/u3741.png")-->
            img(:src="userIcon")
          div.xinxi
            router-link(v-bind:to="{name:'PersonalCenter'}")
              p 个人信息
            router-link(v-bind:to="{name:'InQuire'}")
              p 学分查询
            router-link(v-bind:to="{name:'Collection'}")
              p 我的收藏
            router-link(v-bind:to="{name:'History'}")
              p 历史记录
            router-link(v-bind:to="{name:'CourseManagement'}")
              p.information 课程管理
            div(v-if="isTeacher")
              router-link(v-bind:to="{name:'LiveManagement'}")
                p 直播管理
        div.personal-right
          div.title
            span {{username}}
          div.center
            div.centerTop
              span.centerText 该课程现分为{{tableData.length}}个课程。
              span.centerKke(@click="thelog") + &nbsp;我要开课
              div#black(ref="black" )
              div#blackBox(ref="blacks")
                el-form(ref="form")
                  div.denglu
                    span.describe 院系 :&nbsp;&nbsp;&nbsp;
                    el-cascader.inputname(placeholder="请选择院系信息" :options="options" filterable @change="getDep" :clearable="true" v-bind:show-all-levels="false" change-on-select)
                  div.denglu
                    span.describe 课程名称 :&nbsp;&nbsp;&nbsp;
                    el-input(v-model="formModel.name" placeholder="请输入课程名称" onfocus="this.placeholder=''" onblur="this.placeholder='请输入课程名称'" maxlength="13").inputname
                  div.denglu
                    span.describe 课时:&nbsp;&nbsp;&nbsp;
                    el-input-number(v-model="formModel.classHour" placeholder="请输入课时" onfocus="this.placeholder=''" onblur="this.placeholder='请输入课时'").inputname
                  div.denglu
                    span.describe 学分:&nbsp;&nbsp;&nbsp;
                    el-input-number(v-model="formModel.credit" placeholder="请输入学分，例如3.0" onfocus="this.placeholder=''" onblur="this.placeholder='请输入学分，例如3.0'").inputname
                  div.denglu
                    span.describe 课程类别:&nbsp;&nbsp;&nbsp;
                    el-select(placeholder="请选择" v-model="formModel.gid").inputname
                      el-option(v-for="item in selectClass" :key="item.id" :label="item.name" :value="item.id")
                  div.denglu
                    span.describe 上传课程封面:&nbsp;&nbsp;&nbsp;
                    kalix-clansman-upload(v-model="formModel.photo" :action="action" v-on:filePath="getFilePath" fileType="img" tipText="只能上传jpg/png文件").upload
                  div.denglu
                    span.describe 课程简介:&nbsp;&nbsp;&nbsp;
                    el-input.textInput(type="textarea" :rows="2" placeholder="请输入内容" v-model="formModel.introduction" maxlength="80" resize="none")
                  span.btn.submit(@click="onSubmitClick") 提交
                  span.btn.cancel(@click="disappear") 取消
            div.centerBox
              template.eltemplate
                el-table(:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}").el-table
                  el-table-column(label="序号" width="121")
                    template(slot-scope="scope")
                      div(style="text-align: center") {{ scope.$index + 1 }}
                  el-table-column(prop="name" label="课程名称" width="121")
                  el-table-column(prop="classHour" label="课时" width="121")
                  el-table-column(prop="credit" label="学分" width="121")
                  el-table-column(prop="uname" label="授课教师" width="121")
                  el-table-column(prop="gname" label="课程类别" width="121")
                  el-table-column(prop="haveCredits" label="操作" width="121")
                    template(slot-scope="scope")
                      el-dropdown
                        el-button(type="primary") 操作
                        el-dropdown-menu(slot="dropdown")
                          el-dropdown-item(@click.native="lookCourse(scope.row)") 查看课程
                          el-dropdown-item
                            router-link(@click.native="routerClick(scope.row)" v-bind:to="{name:'CourseManagementList', params: {id: item}}").courseColor 管理课程
                          el-dropdown-item(@click.native="deleteLie(scope.row.id)") 删除课程
              div#blackTwo(ref="blackTwo" )
              div#blackBoxTwo(ref="blackBoxTwo")
                div.blackLeft
                  h1.blackH1 课程章节
                  div.container
                    ul
                      li(v-for="(c,i) in ChapterData")
                        p(v-text="c.title" @click="show(i)")
                        div.con(v-for="cc in c.children") {{cc.title}}
                div.blackRight
                  ul
                    li
                      span.blackSpan 课程名称:&nbsp;&nbsp;
                      span {{item.name}}
                    li
                      span.blackSpan 课时:&nbsp;&nbsp;
                      span {{item.classHour}}
                    li
                      span.blackSpan 学分:&nbsp;&nbsp;
                      span {{item.credit}}
                    li
                      span.blackSpan 授课教师:&nbsp;&nbsp;
                      span {{item.uname}}
                    li
                      span.blackSpan 课程类别:&nbsp;&nbsp;
                      span {{item.gname}}
                    li
                      span.blackSpan 课程简介:&nbsp;&nbsp;
                      span {{item.introduction}}
                div.disappear(@click="ShutDown") 关闭
            div.paging
              el-pagination(@current-change="current_change"
              layout="prev, pager, next"
              :total="total")
</template>

<script type="text/ecmascript-6">
  import treeGrid from '../../components/Layout/baseTreeGrid'
  import KalixClansmanUpload from '../../components/corelib/components/common/upload'
  import {baseURL} from '../../config/global.toml'
  import Message from '../../components/Layout/message'

  export default {
    data() {
      return {
        isTeacher: false,
        index: -1,
        username: '',
        uid: '',
        userIcon: '',
        item: [],
        ChapterData: [],
        total: 100, // 默认数据总数
        pagesize: 6, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        xid: 0,
        formModel: {
          uid: null, // 授课讲师id
          name: null, // 课程名称
          classHour: null, // 课时
          credit: null, // 学分
          gid: null, // 类别id
          photo: null, // 课程照片
          introduction: null, // 课程简介
          // points: null, // 课程要点
          did: null, // 院系id
          audit: '禁止' // 审核
        },
        action: baseURL + '/camel/rest/upload',
        targetURL: '/camel/rest/training/course/getCourse',
        columns: [{
          type: 'hidden',
          key: 'id',
          width: '0'
        }, {
          title: '视频名称',
          key: 'title',
          width: '150'
        }, {
          title: '课程',
          key: 'cname',
          width: '150'
        }, {
          title: '学习人数',
          key: 'hits',
          width: '150'
        }, {
          title: '审核',
          key: 'audit',
          width: '150'
        }, {
          title: '操作',
          type: 'action',
          actions: [{
            type: 'edit',
            text: '编辑',
            icon: 'el-icon-edit'
          }, {
            type: 'delete',
            text: '删除',
            icon: 'el-icon-delete'
          }, {
            type: 'view',
            text: '查看',
            icon: 'el-icon-view'
          }],
          width: '150'
        }],
        falseData: [
          {
            id: 0,
            courseName: '前端小课',
            courseWhen: '126',
            credits: '3',
            teacher: '马老师',
            courseClass: '微课'
          }
        ],
        activeNames: [],
        departments: '', // 院系
        courseName: '', // 课程名称
        courseWhen: '', // 课时
        credits: '', // 学分
        teacher: '', // 授课教师
        courseClass: '', // 课程类别
        coursesCover: '', // 上传课程封面
        courseIntroduce: '', // 课程简介
        options: [],
        value: '',
        selectClass: [],
        tableData: []
      }
    },
    components: {
      treeGrid: treeGrid,
      KalixClansmanUpload: KalixClansmanUpload
    },
    mounted() {
      this.username = this.$KalixCatch.get('user_name')
      this.uid = this.$KalixCatch.get('id')
      this.getHeadImg(this.uid)
      this.getDepCascader()
      this.getCourse(this.uid)
      this.getType()
      this.getRid()
    },
    methods: {
      routerClick(item) {
        console.log('item-------------', item)
        window.sessionStorage.setItem('ids', JSON.stringify(item))
      },
      getRid() {
        this.axios.get('/camel/rest/roles', {
          params: {
            jsonStr: {'name': '教师'}
          }
        }).then(res => {
          if (res.data.totalCount > 0) {
            this.getRole(res.data.data[0].id)
          }
        })
      },
      getRole(rid) {
        this.axios.get('/camel/rest/roles/' + rid + '/users/ids', {
          params: {
            id: rid
          }
        }).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i] === parseInt(this.uid)) {
              this.isTeacher = true
            }
          }
        })
      },
      show(i) {
        this.index = i
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getType() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/genres'
        }).then(res => {
          this.selectClass = res.data.data
        })
      },
      getCourse(uid) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseAllByUid',
          params: {
            uid: uid
          }
        }).then(res => {
          this.tableData = res.data.data
          this.total = this.tableData.length / this.pagesize * 10
        })
      },
      getDep(val) { // 通过级联获取数据后转成字符串
        this.formModel.did = val.toString().substring(val.toString().lastIndexOf(',') + 1, val.toString().length)
      },
      getFilePath(filePath, fileName) {
        this.formModel.photo = filePath
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/departments' + '/getDepCascader'
        }).then(res => {
          this.options = res.data.data
        })
      },
      thelog() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
      },
      onSubmitClick() { // 发布验证
        if (this.formModel.did === null) {
          this.$KalixMessage.error('请选择院系')
          return false
        }
        if (this.formModel.name === null) {
          this.$KalixMessage.error('请输入课程名称')
          return false
        }
        if (this.formModel.classHour === null) {
          this.$KalixMessage.error('请输入课时')
          return false
        }
        if (this.formModel.credit === null) {
          this.$KalixMessage.error('请输入学分')
          return false
        }
        if (this.formModel.gid === null) {
          this.$KalixMessage.error('请选择课程类别')
          return false
        }
        if (this.formModel.photo === null) {
          this.$KalixMessage.error('请选择课程封面')
          return false
        }
        if (this.formModel.introduction === null) {
          this.$KalixMessage.error('请输入课程简介')
          return false
        }
        console.log('this.formModel----:', this.formModel)
        this.formModel.uid = this.$KalixCatch.get('id')
        this.submit()
      },
      submit() {
        this.axios.request({
          method: 'POST',
          url: '/camel/rest/training/course/',
          data: this.formModel
        }).then(response => {
          if (response.data.success) {
            Message.success('添加成功')
            this.$refs['form'].resetFields()
            this.$refs.black.style.display = 'none'
            this.$refs.blacks.style.display = 'none'
            this.getCourse(this.uid)
          }
          // console.log(response.data.msg) // 添加成功
          // this.$refs['form'].resetFields()
          // window.location.reload() // 页面加载
        })
      },
      disappear() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      lookCourse(row) {
        this.item = row
        this.getChapter(row.id)
        this.$refs.blackTwo.style.display = 'block'
        this.$refs.blackBoxTwo.style.display = 'block'
      },
      getChapter(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/videoss/getVideosByVid',
          params: {
            cid: id
          }
        }).then(res => {
          this.ChapterData = res.data.children
        })
      },
      ShutDown() {
        this.$refs.blackTwo.style.display = 'none'
        this.$refs.blackBoxTwo.style.display = 'none'
      },
      deleteLie(id) {
        console.log('delete  id ---:', id)
        this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$http
            .delete('/camel/rest/training/course/' + `${id}`, {})
            .then(res => {
              if (res.data.success) {
                this.getCourse(this.uid)
              } else {
                Message.error('删除失败')
              }
            })
        })
      },
      // 分页功能
      current_change: function (currentPage) {
        this.currentPage = currentPage
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 718px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 5px 5px 10px #ccc

  .personal-left
    width 18%
    height 100%
    float left
    position: relative

  .personal-right
    width 80%
    height 100%
    float right

  /*头像*/
  .HeadPortrait
    width 150px
    height 150px
    position: absolute
    right 0
    top -75px

  .HeadPortrait img
    width 100%
    height 100%

  .xinxi
    position absolute
    top 110px
    right 0
    width 150px
    /*height 300px*/
    border 1px solid #ccc
    border-radius 5px
    overflow hidden

  .xinxi p
    display block
    width 150px
    height 50px
    text-align center
    line-height 50px
    color #999
    box-sizing border-box
    border-top 1px solid #ccc

  .xinxi .information
    background-color #008F95
    color #fff
    font-weight 700
    border-top none

  /*右侧*/
  .title
    margin-top 36px

  .title span
    font-size 20px
    margin-right 14px
    color #000
    font-weight 700

  .center
    width 905px
    height 520px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px
    position relative

  .centerBox
    padding-left 26px
    width 850px

  .centerP
    display inline-block
    text-align right
    width 110px
    height 36px
    line-height 36px
    font-size 18px

  .centers
    width 25px
    margin-left 16px
    text-algin left

  .centerTop
    margin 20px 30px 10px 26px

  .centerText
    color #008F95
    display inline-block

  .centerInp
    width 350px
    height 30px
    border 2px solid #ccc
    display inline-block
    margin-left 130px
    border-radius 5px
    position relative
    line-height 30px

  .centerInp input
    width 285px
    height 18px
    margin-left 16px
    border none
    outline none

  .centerInp img
    position absolute
    top 5px
    right 20px

  .centerKke
    display inline-block
    width 78px
    height 20px
    background-color: #008F95
    font-size 12px
    color #fff
    border-radius 5px
    text-align center
    line-height 20px
    cursor pointer
    margin-right 60px
    float right

  #black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 2
    opacity 0.3
    display none

  #blackBox
    width 580px
    height 650px
    background-color #fff
    position fixed
    left 50%
    top 50%
    margin-left -225px
    margin-top -275px
    z-index 999
    display none
    border-radius 10px
    padding 23px 0 0 56px
    box-sizing border-box
    font-size 14px

  .describe
    display inline-block
    width 100px
    text-align right
    color #525252

  .denglu
    margin 10px 0

  .TextColor
    color #757575

  .textInput
    width 250px
    height 54px
    box-sizing border-box

  .btn
    display inline-block
    width 70px
    height 26px
    text-align center
    line-height 26px
    cursor pointer
    border-radius 5px
    color #fff
    font-size 12px
    margin-top 12px

  .submit
    background-color: #008F95
    margin-left 130px

  .cancel
    background-color: #999
    margin-left 10px

  .File
    opacity 0

  .InpFile
    display inline-block
    width 74px
    height 16px
    background-color: #F2F2F2
    font-size 12px
    color #66667B
    border-radius 5px
    text-align center
    line-height 16px
    position relative
    margin-left 5px

  .InpFile input
    position absolute
    width 100%
    height 100%
    right 0
    top 0
    opacity 0

  .LiColumn li
    width 850px
    height 34px
    background-color #F5FAFD
    margin 5px 0

  .LiColumn span
    display inline-block
    width 121px
    height 34px
    line-height 34px
    text-align center

  // 院系
  .departments
    width 185px

  .inputname
    width 250px
    height 40px

  .upload
    display inline-block

  .paging
    position absolute
    left 50%
    bottom 0
    transform translate(-50%)

  /*查看弹窗*/
  #blackTwo
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 2
    opacity 0.3
    display none

  #blackBoxTwo
    width 650px
    height 500px
    background-color #fff
    position fixed
    left 50%
    top 50%
    margin-left -300px
    margin-top -190px
    z-index 999
    display none
    border-radius 10px
    padding 26px 0 0 24px

  .disappear
    width 60px
    height 25px
    line-height 25px
    border-radius 5px
    position absolute
    right 20px
    bottom 20px
    cursor pointer
    font-size 12px
    background-color #008F95
    color #fff
    text-align center

  .blackLeft
    width 250px
    height 440px
    border 1px solid #ccc
    border-radius 5px
    float left
    padding-left 10px

  .blackRight
    width 250px
    height 440px
    border 1px solid #ccc
    border-radius 5px
    float left
    margin-left 26px
    font-size 13px

  .blackRight li
    margin 10px 0

  .blackSpan
    display inline-block
    width 80px
    text-align right

  .blackH1
    color #008F95
    height 50px
    line-height 50px

  .container
    width 100%

  .container ul li .con
    margin 5px 0 5px 15px
    font-size 14px

  .container ul
    width 100%

  .container li
    padding 5px

  .container li p
    width 100%
    line-height 30px
    font-size 14px
    color #000

  .container li p.active
    color #f00

  .container li .bottom
    background-color #f3f3f3
    padding 10px
    box-sizingborder-box
    font-size 12px
    line-height 20px
    display none

  .container li div.active
    display block
</style>

<style lang="stylus" rel="stylesheet/stylus">
  .centerBox .el-table td, .el-table th.is-leaf
    text-align center

  .courseColor
    color #606266

  .el-collapse-item__header
    width 250px
</style>
